<template>
    <el-form :model="form" status-icon label-width="120px" class="demo-ruleForm" size="large">
        <el-form-item prop="type" label="优惠卷类型：" label-width="120px">
            <el-select v-model="form.type" class="m-2" placeholder="全部" size="large">
                <el-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </el-form-item>

        <el-form-item label="商品名称:" prop="name">
            <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>

        <el-form-item prop="platformList" label="适用平台：" label-width="120px">
            <el-select v-model="form.platformList" class="m-2" placeholder="全部" size="large">
                <el-option v-for="item in platformList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
        </el-form-item>

        <el-form-item label="总发行量:" prop="memberLevel">
            <el-input v-model="form.memberLevel" autocomplete="off" />
        </el-form-item>

        <el-form-item label="面额:" prop="amount">
            <el-input v-model="form.amount" autocomplete="off" />
        </el-form-item>

        <el-form-item prop="perLimit" label="每人限领:" label-width="120px">
            <el-input v-model="form.perLimit"></el-input>
        </el-form-item>

        <el-form-item label="使用门槛:" prop="minPoint">
            <el-input v-model="form.minPoint"></el-input>
        </el-form-item>

        <el-form-item label="领取日期">
            <el-col :span="11">
                <el-date-picker v-model="form.enableTime" type="date" label="选择日期" placeholder="选择日期"
                    style="width: 100%" />
            </el-col>
        </el-form-item>

        <el-form-item label="有效期">
            <el-col :span="11">
                <el-date-picker v-model="form.startTime" type="date" label="Pick a date" placeholder="选择日期"
                    style="width: 100%" />
            </el-col>
            <el-col class="text-center" :span="1" style="margin: 0 0.5rem">-</el-col>
            <el-col :span="11">
                <el-date-picker v-model="form.endTime" type="date" label="Pick a date" placeholder="选择日期"
                    style="width: 100%" />
            </el-col>
        </el-form-item>

        <el-form-item label="可使用商品">
            <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="全场通用" name="note"></el-tab-pane>
                <el-tab-pane label="指定分类" name="second"></el-tab-pane>
                <el-tab-pane label="指定商品" name="third"></el-tab-pane>
            </el-tabs>
        </el-form-item>

        <el-form-item label="备注:" prop="note">
            <el-input v-model="form.note" type="textarea" placeholder="请输入内容"></el-input>
        </el-form-item>

    </el-form>
    <el-button type="primary" @click="addCoupon">提交</el-button>
    <el-button>重置</el-button>
</template>

<script setup lang="ts">
import { reactive, ref, toRefs } from 'vue';
import type { TabsPaneContext } from 'element-plus'
import { marketing } from "@/api"

const activeName = ref('note')

const typeList = [
    {
        value: '0',
        label: '全场赠卷',
    },
    {
        value: '1',
        label: '会员赠卷',
    },
    {
        value: '2',
        label: '购物赠卷',
    },
    {
        value: '3',
        label: '注册赠卷',
    },
]

const platformList = [
    {
        value: "0",
        label: "全平台"
    },
    {
        value: "1",
        label: "移动平台"
    },
    {
        value: "2",
        label: "PC平台"
    },
]

const state = reactive({
    form: {
        // 优惠卷类型
        type: "",
        // 优惠卷名称   
        name: "",
        // 适用平台
        platformList: "",
        // 总发行量
        memberLevel: "",
        // 面额
        amount: "",
        // 限领
        perLimit: 1,
        // 使用门槛
        minPoint: "",
        // 领取日期
        enableTime: "",
        // 开始日期
        startTime: "",
        // 结束日期
        endTime: "",
        // 备注
        note: ""
    }
})

const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}

const addCoupon = () => {
    marketing.addCouponApi(state.form).then(res => {
        if (res.code === 200) {
            console.log(res);

        }
    })
}

const { form } = toRefs(state)
</script>

<style scoped>

</style>